<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
<head>
<jsp:include page="/common/common.jsp" />
<link rel="stylesheet" type="text/css"
	href="${path}/assets/plugins/select2/select2.css" />
<link rel="stylesheet" type="text/css"
	href="${path}/assets/plugins/select2/select2-metronic.css" />
	<script>
var aaa1 = [];
var aaa2 = [];
var aaa3 = [];
var aaa4 = [];
var aaa5 = [];
var aaa6 = [];
var bbb1 = [];
var bbb2 = [];
var bbb3 = [];
var bbb4 = [];
var bbb5 = [];
var bbb6 = [];
var ccc = 0;
</script>
</head>
<body class="page-header-fixed">
	<jsp:include page="/common/header.jsp" />
	<div class="clearfix"></div>
	<div class="page-container">
		<div class="page-sidebar-wrapper"><jsp:include
				page="/common/menu.jsp" /></div>
		<div class="page-content-wrapper">
			<div class="page-content">
				<div class="row">
					<div class="col-md-12">
						<div class="portlet box purple">
							<div class="portlet-title">
								<div class="caption">
									<i class="fa fa-file-text-o"></i> 论坛数据列表
								</div>
								<div class="tools">
									<div class="actions">
										<a
											href='javascript:window.open("${path}/forumRecord/downExcel?"+$("#formQuery").serialize())'
											class="btn blue">导出Excel</a>
									</div>
								</div>
							</div>
							<div class="portlet-body">
								<div id="container1"
									style="min-width: 310px; height: 400px; margin: 0 auto"></div>
							</div>
							<div class="portlet-body">
								<form id="formQuery" class="form-horizontal"
									action="${path}/forumRecord/list">
									<div class="form-body">
										<div class="form-group">
											<label class="col-md-1 control-label">IP地址</label>
											<div class="col-md-2">
												<input type="text" id="user_ip" name="user_ip"
													class="form-control" />
											</div>
											<label class="col-md-1 control-label">访问账户</label>
											<div class="col-md-2">
												<input type="text" id="user_account" name="user_account"
													class="form-control" />
											</div>
											<label class="col-md-1 control-label">论坛名称</label>
											<div class="col-md-2">
												<input type="text" id="forum_title" name="forum_title"
													class="form-control" />
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-1 control-label">论坛类型</label>
											<div class="col-md-2">
												<input type="text" id="forum_type" name="forum_type"
													class="form-control" />
											</div>
											<label class="col-md-1 control-label">发布时间</label>
											<div class="col-md-4">
												<div
													class="input-group input-large date-picker input-daterange"
													data-date-format="yyyy-mm-dd">
													<input type="text" class="form-control" id="fromDate"
														name="createTime" value="${entity.createTime.split("
														,")[0]}"
                                                       readonly="readonly"
														onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
													<span class="input-group-addon">to</span> <input
														type="text" class="form-control" id="toDate"
														name="createTime" value="${entity.createTime.split("
														,")[1]}"
                                                       readonly="readonly"
														onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
												</div>
											</div>
											<div class="col-md-1">
												<button type="button" class="btn green"
													onclick="getForumRecordList()">查询</button>
												<!-- e 查询直接调用getNewsList() 在本末的script中-->
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-1 control-label">论坛排名前</label>
											<div class="col-md-2">
												<input type="text" id="topNum" name="topNum"
													class="form-control" />
											</div>
											<label class="col-md-1 control-label">时长:小时</label>
											<div class="col-md-2">
												<input type="text" id="hours" name="hours"
													class="form-control" />
											</div>
										</div>
									</div>
								</form>
								<table class="table table-striped table-bordered table-hover"
									id="forumRecordList"></table>
								<span class="input-group-addon"><button type="button" class="btn green" onclick="drawList(5)">Top1 Ip实时访问数据</button></span>
								</br> <span class="input-group-addon"><button type="button" class="btn green" onclick="drawList(2)">Top3 Ips的访问总量</button></span>
								</br> <span class="input-group-addon"><button type="button" class="btn green" onclick="drawList(1)">Top3 ip的访问论坛类型展示</button></span>
								</br> <span class="input-group-addon"><button type="button" class="btn green" onclick="drawList(3)">Top3 ip具体时间的访问量:发布时间必选且短时间</button></span>
								</br> <span class="input-group-addon"><button type="button" class="btn green" onclick="drawList(4)">Top3 ip时间段内的访问量:发布时间必选</button></span>

								
								<div class="portlet-body">
									<div id="container"
										style="min-width: 310px; height: 400px; margin: 0 auto"></div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="/common/footer.jsp" />
	<script type="text/javascript"
		src="${path}/assets/plugins/calendar/WdatePicker.js"></script>
	<script type="text/javascript"
		src="${path}/assets/plugins/district/linkagesel-min.js"></script>
	<script type="text/javascript"
		src="${path}/audit/forumRecord/js/forumRecord.js"></script>
	<script
		src="${path}/assets/plugins/ueditor/third-party/highcharts/highcharts.js"></script>
	<script
		src="${path}/assets/plugins/ueditor/third-party/highcharts/modules/exporting.js"></script>
	<script>
	
		var msg = '${msg}';
		$(function() {
			if (msg) {
				App.bubble(200, msg);
			}
			$("#user_ip").val('${entity.user_ip}');
			$("#user_ip").val('${entity.user_ip}');
			$("#forum_type").val('${entity.forum_type}');
			$("#user_account").val('${entity.user_account}');
			$("#forum_refer").val('${entity.forum_refer}');
			$("#forum_group").val('${entity.forum_group}');
			$("#forum_title").val('${entity.forum_title}');
			$("#forum_content").val('${entity.forum_content}');
			$("#fromDate").val('${fromDate}');
			$("#toDate").val('${toDate}');
			$("#add_time").val('${entity.add_time}');
			getForumRecordList();
		});

		//global variable： 图表序号
		var cnt = 1;
		//global ：实时当前时间
		var currentTime = (new Date()).getTime();
		
		//画下一个图表
		function drawList(cnt) {
			var beginning = $("#fromDate").val();
			var ending = $("#toDate").val();
			//需要展示的ip个数
			var num = 3;
			if($("#topNum").val() != ""){
				num = $("#topNum").val();
			}
			//图5:显示的时间间隔
			var hs = 1;
			if($("#hours").val() != ""){
				hs = $("#hours").val();
			}
			var orgTime = (new Date()).getTime();//上一个时间点
			var ctgr1 = 0;//图1实时动态展示的name
			var selected = 1;//选择实时动态展示的ip的排名
			$.ajax({
						url : _path + "/forumRecord/showTable?limitMax=" + num
								+ "&tableType=" + cnt + "&fromD=" + beginning
								+ "&toD=" + ending + "&currentTime="
								+ Math.ceil(currentTime / 1000)
								+ "&originalTime=" + Math.ceil(orgTime / 1000)
								+ "&pos=" + selected,
						type : "POST",
						dataType : "json",
						async : false,
						success : function(jsonMap) {
							var ctgr = jsonMap.ctgr;
							ctgr1 = ctgr[selected - 1];
							if (cnt == 1) {
								var types = jsonMap.types;
								var typesNum = jsonMap.typesNum;
								var xaxises = {};//图表展示的x坐标
								var yaxises = {};//图表展示的y坐标
								var tempxaxises = {};//一维数组
								var indexx = 0, index1 = 0;
								//将论坛类型的二维数组types合并成一维数组tempxaxises，元素的总个数为index1
								for (var i1 = 0; i1 < num; i1++) {
									for (var j1 = 0; j1 < num; j1++) {
										tempxaxises[index1] = types[i1][j1];
										index1++;
									}
								}
								//去除一维数组tempxaxises中相同的元素，得到一维数组xaxises：即图表展示的横坐标
								//采用包含关系，取各ip访问类型的并集
								var o = 1;//内层循环的初始值
								for (var i2 = 0; i2 < (index1 - 1); i2++) {
									var tempIndex = 0;
									for (var j2 = (i2 + 1); j2 < index1; j2++) {
										if (tempxaxises[i2] != tempxaxises[j2]) {
											tempIndex++;
										}
									}

									if ((index1 - i2 - 1) == tempIndex) {
										xaxises[indexx] = tempxaxises[i2];
										indexx++;
									}
								}
								xaxises[indexx] = tempxaxises[index1 - 1];
								//处理访问类型下的访问量与x轴的对应关系yaxises：即y坐标值
								//若暂无访问类型，则赋值为0
								for (var i3 = 0; i3 < num; i3++) {
									var tempListNum = {};
									for (var l3 = 0; l3 <= indexx; l3++) {
										tempListNum[l3] = 0;
									}
									for (var j3 = 0; j3 < num; j3++) {
										for (var k3 = 0; k3 <= indexx; k3++) {
											if (types[i3][j3] == xaxises[k3]) {
												tempListNum[k3] = typesNum[i3][j3];
											}
										}
									}
									yaxises[i3] = tempListNum;
								}
								//draw
								$('#container').highcharts(
										{
											chart : {
												type : 'bar'
											},
											title : {
												text : '论坛类型展示Top'
														+ num
											},
											xAxis : {
												categories : xaxises
											},
											yAxis : {
												min : 0,
												title : {
													text : '点击同类型论坛次数'
												}
											},
											legend : {
												backgroundColor : '#FFFFFF',
												reversed : true
											},
											plotOptions : {
												series : {
													stacking : 'normal'
												}
											},
											series : [
													{
														name : ctgr[0],
														data : [ yaxises[0][0],
																yaxises[0][1],
																yaxises[0][2],
																yaxises[0][3] ]
													// 		                data: [0,4,4,2]
													// 		                data: yaxises[0]//error
													},
													{
														name : ctgr[1],
														data : [ yaxises[1][0],
																yaxises[1][1],
																yaxises[1][2],
																yaxises[1][3] ]
													// 		                data: [1477,0,4401,1481]
													// 		                data: yaxises[1]//error
													},
													{
														name : ctgr[2],
														data : [ yaxises[2][0],
																yaxises[2][1],
																yaxises[2][2],
																yaxises[2][3] ]
													// 		                data: [27,0,1,21]
													// 		                data: yaxises[2]//error
													}, ]
										});
								if (beginning == "" || ending == "") {
									alert("Please choose seleted date for the followings.");
								}
							}

							if (cnt == 2) {
								var sr_data = jsonMap.sr_data;
								//draw
								$('#container').highcharts({
									chart : {
										type : 'bar'
									},
									title : {
										text : '访问数Top' + num + '的IP'
									},
									subtitle : {
										text : ''//标题
									},
									xAxis : {
										categories : ctgr,// 人员数组
										title : {
											text : null
										}
									},
									yAxis : {
										min : 0,
										title : {
											text : '',
											align : 'high'
										},
										labels : {
											overflow : 'justify'
										}
									},
									tooltip : {
										valueSuffix : ' '
									},
									plotOptions : {
										bar : {
											dataLabels : {
												enabled : true
											}
										}
									},
									legend : {
										layout : 'vertical',
										align : 'right',
										verticalAlign : 'top',
										x : -40,
										y : 100,
										floating : true,
										borderWidth : 1,
										backgroundColor : '#FFFFFF',
										shadow : true
									},
									credits : {
										enabled : false
									},
									series : [ {
										name : '访问（次数）',
										data : sr_data
									} ],
									colors : [ 'blue', ]
								});
								if (beginning == "" || ending == "") {
									alert("Warning:Please choose seleted date for the followings.");
								}
							}

							if (cnt == 3) {
								if (beginning == "" || ending == "") {
									alert("Warning:Please choose seleted date for the followings.");
								}
								var addTimes = jsonMap.addTimes;
								var addTimesNum = jsonMap.addTimesNum;//纵坐标
								var add = {};//横坐标数组
								for (var k = 0; k < num; k++) {
									add[k] = k;
								}
								//draw
								$('#container').highcharts(
										{
											chart : {
												type : 'line'
											},
											title : {
												text : '总访问量TOP-' + num
														+ 'ips 每天具体访问量'
											},
											subtitle : {
												text : '某个时间段内的翔实的访问量'
											},
											xAxis : {
												categories : add
											},
											yAxis : {
												title : {
													text : 'visit times'
												}
											},
											tooltip : {
												enabled : false,
												formatter : function() {
													return '<b>'
															+ this.series.name
															+ '</b><br/>'
															+ this.x + ': '
															+ this.y;
												}
											},
											plotOptions : {
												line : {
													dataLabels : {
														enabled : true
													},
													enableMouseTracking : false
												}
											},
											series : [ {
												name : ctgr[0],
												data : addTimesNum[0]
											}, {
												name : ctgr[1],
												data : addTimesNum[1]
											}, {
												name : ctgr[2],
												data : addTimesNum[2]
											} ]
										});
							}
							//1 hours = 3600 seconds
							//所选时间段内，有效时间段，已小时间为起始，一个小时为间隔计数
							if (cnt == 4) {
								if (beginning == "" || ending == "") {
									alert("Warning:Please choose seleted date for the followings.");
								}
								var addTimes = jsonMap.addTimes;
								var addTimesNum = jsonMap.addTimesNum;
								var cntAddTimes = jsonMap.cntAddTimes;
								//横坐标数组
								var add = {};
								//最大的间隔数
								var theMax = 1;
								//先声明一个一维数组
								var finalNums = new Array();
								
								//各ip计算所得间隔数组
								//计算最长的间隔
								//实际最小的时间与最大时间
								var ii = cntAddTimes[0];
								var firstTime = addTimes[0][0];
								var lastTime = addTimes[0][ii-1];
								for(var q=0;q<num;q++){
									//每个IP的add_time的个数
									var qIndex = cntAddTimes[q];
									if(firstTime>addTimes[q][0]){
										firstTime = addTimes[q][0];
									}
									if(lastTime<addTimes[q][qIndex - 1]){
										lastTime = addTimes[q][qIndex - 1];
									}
								}
								theMax = Math.ceil((lastTime - firstTime) / (3600*hs));
								//计算纵坐标
								for (var m = 0; m < num; m++) {
									//声明一个临时的一维数组并初始化
									var finalNum = new Array();
									for(var p =0;p<theMax; p++){
										finalNum[p] = 0;
									}
									//产生二维数组finalNums中的一个元素数组finalNum:纵坐标
									for (var n = 0; n < cntAddTimes[m]; n++) {
										finalNum[Math.floor((addTimes[m][n] - firstTime) / (3600*hs))] += addTimesNum[m][n];
									}
									finalNums[m] = finalNum;
								}
								//计算横坐标：粗略由段落数标示，暂不用时间节点
								for (var iter0 = 1; iter0 <= theMax; iter0++) {
// 									add[iter0 - 1] = iter0;
									var tttt = firstTime+(iter0-1)*3600;
									//时间戳转换成日期,仅第一个保留日期，其余均取时间
					            	var newDate = new Date();
					            	newDate.setTime(tttt*1000);
					            	add[iter0 - 1] = newDate.toTimeString().substring(0, 8);
								}
								//时间戳转换成日期
				            	var newDate1 = new Date();
				            	newDate1.setTime(firstTime*1000);
				            	add[0] = newDate1.toLocaleDateString().substring(0, 11)+" "+newDate1.toTimeString().substring(0, 8);
								//draw
								$('#container').highcharts(
										{
											chart : {
												type : 'line'
											},
											title : {
												text : '总访问量TOP' + num
														+ 'ips 每天具体访问量'
											},
											subtitle : {
												text : '以'+hs+'个小时为一个计数时段内的具体访问量'
											},
											xAxis : {
												categories : add
											},
											yAxis : {
												title : {
													text : '访问总量(次数)'
												}
											},
											tooltip : {
												enabled : false,
												formatter : function() {
													return '<b>'
															+ this.series.name
															+ '</b><br/>'
															+ this.x + ': '
															+ this.y;
												}
											},
											plotOptions : {
												line : {
													dataLabels : {
														enabled : true
													},
													enableMouseTracking : false
												}
											},
											series : [ {
												name : ctgr[0],
												data : finalNums[0]
											}, {
												name : ctgr[1],
												data : finalNums[1]
											}, {
												name : ctgr[2],
												data : finalNums[2]
											} ]
										});
							}
						}
					});

			var y = 0;//纵坐标
			if (cnt == 5) {
				//采用UTC
				Highcharts.setOptions({
					global : {
						useUTC : false
					}
				});

				var chart;
				$('#container')
						.highcharts(
								{
									chart : {
										type : 'spline',
										// don't animate in old IE
										animation : Highcharts.svg,
										marginRight : 10,
										events : {
											load : function() {
												// set up the updating of the chart each second             
												var series = this.series[0];
												setInterval(
														function() {
															var x = (new Date()).getTime(); // current time  
															$.ajax({
																		url : _path
																				+ "/forumRecord/showTable?limitMax="
																				+ num
																				+ "&tableType="
																				+ cnt
																				+ "&fromD="
																				+ beginning
																				+ "&toD="
																				+ ending
																				+ "&currentTime="
																				+ Math
																						.ceil(x / 1000)
																				+ "&originalTime="
																				+ Math
																						.ceil(orgTime / 1000)
																				+ "&pos="
																				+ selected,
																		type : "POST",
																		dataType : "json",
																		async : false,
																		success : function(
																				jsonMap) {
																			y = jsonMap.currentRSNum;
																		}
																	});
															orgTime = x
															series.addPoint([x, y ],true, true);
														}, 1000); //speed t=1000ms  1 second                                                  
											}
										}
									},
									title : {
										text : 'Top1 Ip实时访问数据'
									},
									xAxis : {
										type : 'datetime',
										tickPixelInterval : 150
									},
									yAxis : {
										title : {
											text : '访问总量(次数)'
										},
										
										plotLines : [ {
											value : 0,
											width : 1,
											color : '#808080'
										} ]
									},
									tooltip : {
										formatter : function() {
											return '<b>'
													+ this.series.name
													+ '</b><br/>'
													+ Highcharts
															.dateFormat(
																	'%Y-%m-%d %H:%M:%S',
																	this.x)
													+ '<br/>'
													+ Highcharts.numberFormat(
															this.y, 2);
										}
									},
									legend : {
										enabled : false
									},
									exporting : {
										enabled : false
									},
									series : [ {
										name : ctgr1,
										data : (function() {
											// generate an array of random data                             
											var data = [], time = (new Date()).getTime(), i;
											for (i = -19; i <= 0; i++) {
												data.push({
													x : time + i * 1000, //speed t=1000ms                                   
													y : y
												});
											}
											return data;
										})()
									} ]
								});
			}


		}
						
		function drawTableHeader(){
			//根据查询条件展示所有Ip的访问数
			$.ajax({
					url : _path + "/forumRecord/showTableHeader?user_ip=" + $("#user_ip").val()
							+ "&user_account=" + $("#user_account").val() + "&forum_title=" + $("#forum_title").val()
							+ "&fromD=" + $("#fromDate").val() + "&toD="
							+ $("#toDate").val(),
					type : "POST",
					dataType : "json",
					async : false,
					success : function(jsonMap) {
						var list1 = jsonMap.dataList1;
		    	    	var list2 = jsonMap.dataList2;
		    	    	var list3 = jsonMap.dataList3;
		    	    	var list4 = jsonMap.dataList4;
		    	    	var list5 = jsonMap.dataList5;
		    	    	var list6 = jsonMap.dataList6;
		    	    	
		    	    	if(list1.length>0){
		    	        	for(var i=0;i<list1.length;i++){
		    	        		aaa1[i]=list1[i].aa1;
		    	        		bbb1[i]=list1[i].time1;
		    	        	}
		    	        } 
		    	        else
		    	        {
		    	        	aaa1.length = 0;
		    	        	bbb1.length = 0;
		    	        	
		    	        }
		    	        
		    	    	if(list2.length>0){
		    	        	for(var i=0;i<list2.length;i++){
		    	        		aaa2[i]=list2[i].aa1;
		    	        		bbb2[i]=list2[i].time1;
		    	        	}
		    	        } 
		    	        else
		    	        {
		    	        	aaa2.length = 0;
		    	        	bbb2.length = 0;
		    	        	
		    	        }
		    	    	
		    	    	if(list3.length>0){
		    	        	for(var i=0;i<list3.length;i++){
		    	        		aaa3[i]=list3[i].aa1;
		    	        		bbb3[i]=list3[i].time1;
		    	        	}
		    	        } 
		    	        else
		    	        {
		    	        	aaa3.length = 0;
		    	        	bbb3.length = 0;
		    	        	
		    	        }
		    	    	
		    	    	if(list4.length>0){
		    	        	for(var i=0;i<list4.length;i++){
		    	        		aaa4[i]=list4[i].aa1;
		    	        		bbb4[i]=list4[i].time1;
		    	        	}
		    	        } 
		    	        else
		    	        {
		    	        	aaa4.length = 0;
		    	        	bbb4.length = 0;
		    	        	
		    	        }
		    	    	
		    	    	if(list5.length>0){
		    	        	for(var i=0;i<list5.length;i++){
		    	        		aaa5[i]=list5[i].aa1;
		    	        		bbb5[i]=list5[i].time1;
		    	        	}
		    	        } 
		    	        else
		    	        {
		    	        	aaa5.length = 0;
		    	        	bbb5.length = 0;
		    	        	
		    	        }
		    	    	
		    	    	if(list6.length>0){
		    	        	for(var i=0;i<list6.length;i++){
		    	        		aaa6[i]=list6[i].aa1;
		    	        		bbb6[i]=list6[i].time1;
		    	        	}
		    	        } 
		    	        else
		    	        {
		    	        	aaa6.length = 0;
		    	        	bbb6.length = 0;
		    	        	
		    	        }
		    	    	
	
						$('#container1').highcharts({
				        chart: {
				            type: 'column'
				        },
				        title: {
				            text: '论坛访问数统计'
				        },
				        xAxis: {
				            categories: [bbb1[0], bbb2[0], bbb3[0], bbb4[0], bbb5[0],bbb6[0]]
				        },
				        yAxis: {
				            min: 0,
				            title: {
				                text: '总数 (次数)'
				            }
				        },
				        tooltip: {
				            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
				                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
				            footerFormat: '</table>',
				            shared: true,
				            useHTML: true
				        },
				        plotOptions: {
				            column: {
				                pointPadding: 0.2,
				                borderWidth: 0
				            }
				        },
				        series: [{
				            name: '各时段总量统计',
				            data: [aaa1[0], aaa2[0], aaa3[0], aaa4[0], aaa5[0],aaa6[0]]
				
				        }]
				    });
				}
			});	
		}
	</script>
</body>
</html>